<template>
  <div class="wrapper">
    <div class="fill-img">
      <q-img src="@/assets/images/BestSellers/guess-what-you-like.webp">
      </q-img>
    </div>
    <div class="half">

    </div>
    <div class="food-cards half">
      <div class="foods" :style="sliderStyle">
<!--        <aplusmax-goods-card :tag="false" v-for="n in itemsComputed" :key="n"></aplusmax-goods-card>-->
        <aplusmax-two-goods></aplusmax-two-goods>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, reactive, computed, ref} from 'vue'

defineProps({})

const items = reactive([
  [1, 2],
  [3, 4]
])

const itemsComputed = computed(() => {
  return items.flat()
})


const translateX = ref(0)
const active = ref(1)

const slide_left = () => {
  if (active.value !== 1){
    translateX.value += 100; // 调整为滑动的距离
    active.value -= 1
  }
}

const slide_right = () => {
  if (active.value < items.length){
    translateX.value -= 100; // 调整为滑动的距离
    active.value += 1
  }
}

const slide_position = (position: Number) => {
  if (Array.from({ length: items.length }, (_, index) => index+1).includes(position)){
    active.value = position
    translateX.value = -(100*(active.value-1))
  }
}



const sliderStyle = computed(() => {
  return {
    transform: `translateX(${translateX.value}%)`,
  };
})

const emit = defineEmits([])

defineExpose({})
</script>

<style scoped lang='less'>
.wrapper{
  border-radius: 10px;
  background-color: #efefef;
  position: relative;
  padding: 50px 0;
  display: flex;
  overflow: hidden;
  .fill-img{
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 0;
    .q-img{
      padding-top: 0!important;
      height: 100%!important;
    }
  }
  .half {
    flex: 1;
  }
  .food-cards{
    overflow: hidden;
    .foods{
      transition: transform 0.5s ease;
      padding: 0 40px;
      //display: flex;
    }
  }
}
</style>